<script setup lang="ts">
import GraphCharts from "@/components/GraphCharts.vue";
import ScatterCharts from "@/components/ScatterCharts.vue";
import PieAndAnnularCharts from "@/components/PieAndAnnularCharts.vue";
import HeatmapCharts from "@/components/HeatmapCharts.vue";
import LineAndBarCharts from "@/components/LineAndBarCharts.vue";
import WordCloudCharts from "@/components/WordCloudCharts.vue";


</script>

<template>
  <div class="content">
    <div class="title">
      基于Python的河源房价数据可视化分析
    </div>
    <div class="row">
      <line-and-bar-charts></line-and-bar-charts>
      <word-cloud-charts></word-cloud-charts>
      <scatter-charts></scatter-charts>
    </div>
    <div class="row">
      <heatmap-charts></heatmap-charts>
      <graph-charts></graph-charts>
      <pie-and-annular-charts></pie-and-annular-charts>
    </div>
  </div>
</template>

<style scoped>
.content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.title{
  width: 100%;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
}
.row{
  width: 100%;
  height: 39vh;
  display: flex;
  flex-direction: row;
}
</style>